

<template>
  <view class="publish">
    <view class="user-info flex">
      <view class="tip"> 你今天走的每一步 都会算数 </view>
      <view class="user" @click="toPage('/pages/user/index')">
        <view class="user-img"> </view>
        <view class="user-name"> 测试</view>
        <view class="user-no"> 09111</view>
      </view>
    </view>

    <view class="tools">
      <nut-row class="yellow-line">
        <nut-col :span="4" ><view   class="yellow-line"> 小区</view>  </nut-col>
        <nut-col :span="20"> <nut-searchbar @click="toPage('/pages/map/index')" v-model="tmp.tab" placeholder="请输入小区或者物业地址位置" ></nut-searchbar> </nut-col>
      </nut-row>
      <view class="line2"> </view>
      <nut-row >
        <nut-col :span="4"  class="eee-line"> 放盘 </nut-col>
        <nut-col :span="10"> <view :class="saleType==1?'col2 col3':'col2'" @click="mode=1"> 出售 </view>  </nut-col>
        <nut-col :span="10"> <view :class="saleType==0?'col2 col3':'col2'" @click="mode=0"> 出租 </view> </nut-col>
      </nut-row> 
    </view>
    <view class="bar"> </view>

    <nut-tabs
      v-model="tmp.tab"
      direction="vertical"
      :animated-time="0"
      class="main-tab"
      @change="changeTab"
    >
      <nut-tabpane title="类型" pane-key="1"> <Type /> </nut-tabpane>
      <nut-tabpane title="门牌" pane-key="2"> <Hose /> </nut-tabpane>
      <nut-tabpane title="面积" pane-key="3"> <Area /> </nut-tabpane>
      <nut-tabpane title="特色" pane-key="4"> <Feature /> </nut-tabpane>
      <nut-tabpane title="价格" pane-key="5"> <Price /> </nut-tabpane>
      <nut-tabpane title="照片" pane-key="6"> <Picture /> </nut-tabpane>
      <nut-tabpane title="描述" pane-key="7"> <Desc /> </nut-tabpane>
      <nut-tabpane title="状态" pane-key="8"> <Status /> </nut-tabpane>
    </nut-tabs>
    <view class="eee-bg center">
      <nut-button class="publish-btn btn" color="#FBD100" type="primary" @click="push()" >保存</nut-button>
      <nut-button class="publish-btn btn" color="#FBD100" type="primary" @click="push()">提交</nut-button>
    </view>
     <Datepicker :show="show" @confirm="confirm"/>
  </view>
</template>

<script>
import Type from "./components/Type.vue";
import Status from "./components/Status.vue";
import Picture from "./components/Picture.vue";
import Price from "./components/Price.vue";

import Hose from "./components/Hose.vue";
import Feature from "./components/Feature.vue";
import Desc from "./components/Desc.vue";
import Area from "./components/Area.vue";
import Datepicker from '../../common/datepicker.vue'
import Taro, { useReady, getCurrentInstance } from "@tarojs/taro";
export default {
  components: {
    Datepicker,
    Type,
    Status,
    Picture,
    Price,
    Hose,
    Feature,
    Desc,
    Area,
  },
  data() {
    return {
      saleType:1,
      tmp: {
        tab: "0",
      },
      show:false,
      date:"",
    };
  },
  created(){
    this.$bus.on('showTime', msg => {
       console.log('该更新菜单选中项了', msg)
       this.show = true
    });
    this.load()
  },
  methods: {
    confirm (date) {
      // this.ztPrice.settledTime = data
      this.show = false
      this.$bus.emit('showTimeBack',date)
      },
    changeTab({ title, paneKey, disabled }) {
      console.log(title, paneKey, disabled);
      this.tmp.tab = paneKey;
    },
    load() {
      var th = this;
      th.ajax.get(getCurrentInstance().router.params.id? "/property/getInfoByAuth/" + options.id: th.ajax.api.loadTemp).then((res) => {
          th.handelViewData(res);
      });
    },
    handelViewData(res) {
      console.log("查询成功", res);
      var th = this;
      var tmp = {};
      tmp.ztApproval = res.data.ztApproval || {};
      tmp.ztFeature = res.data.ztFeature || {};
      tmp.ztLocation = res.data.ztLocation || {};
      tmp.ztPicture = res.data.ztPicture || {};
      tmp.ztPrice = res.data.ztPrice || {};
      tmp.ztSpace = res.data.ztSpace || {};

      th.saleTyp = res.data.saleTyp;
      th.propertyName = res.data.propertyName;
      this.$store.dispatch("asyncPublishInfo", tmp);
    },
    put() {},
    push() { 
      var th = this;
      var { tmp,publishInfo,ztLocation,ztSpace,ztPrice} = this.$store.state

      console.log({
        tmp,publishInfo,ztLocation,ztSpace,ztPrice
      });   

      th.ajax.post(getCurrentInstance().router.params.id?  this.ajax.api.property : this.ajax.api.addTemp,this.handelData).then((res) => {
          console.log("物业接口返回",res);

      });

    },
    handelData() {
      var data = this.$store.state;
      data.cooperationAmount = parseFloat(data.cooperationAmount);
      data.cooperationProportion = parseFloat(data.cooperationProportion);
      data.cooperationType = parseFloat(data.cooperationType);
      data.propertyStatus = parseFloat(data.propertyStatus);
      data.propertyPermission = data.propertyPermission == "false" ? 0 : 1;
      data.ztLocation.building = parseFloat(data.ztLocation.building);
      data.ztLocation.certificateType = parseFloat( data.ztLocation.certificateType);
      data.ztLocation.storey = parseFloat(data.ztLocation.storey);
      data.ztLocation.totalStorey = parseFloat(data.ztLocation.totalStorey);
      data.ztSpace.balcony = parseFloat(data.ztSpace.balcony);
      data.ztSpace.basement = parseFloat(data.ztSpace.basement);
      data.ztSpace.carport = parseFloat(data.ztSpace.carport);
      data.ztSpace.coveredArea = parseFloat(data.ztSpace.coveredArea);
      data.ztSpace.gardenArea = parseFloat(data.ztSpace.gardenArea);
      data.ztSpace.householdStorey = parseFloat(data.ztSpace.householdStorey);
      data.ztSpace.insideArea = parseFloat(data.ztSpace.insideArea);
      data.ztSpace.interlayer = parseFloat(data.ztSpace.interlayer);
      data.ztSpace.interlayerHeight = parseFloat(data.ztSpace.interlayerHeight);
      data.ztSpace.lift = parseFloat(data.ztSpace.lift);
      data.ztSpace.parlor = parseFloat(data.ztSpace.parlor);
      data.ztSpace.room = parseFloat(data.ztSpace.room);
      data.ztSpace.totalFloor = parseFloat(data.ztSpace.totalFloor);

      return data;
    },
  },
};
</script>


<style lang="scss">
.nut-tabs__titles-item__line {
  display: none !important;
}
.nut-tabs__titles{
  width: 50px!important;
}
.nut-tabpane{
  padding: 0px!important;
}
.nut-tabs__titles-item {
  background: #f5f5f5;
  color: #ccc;
}
.nut-tabs__titles-item.active {
  background: #fff;
} 
.publish {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-size: 18px;
}
.main-tab {
  flex: 1;
  overflow: hidden;
}

.tab-content {
  padding:  20px 5%;
  width: 300px;
}
.user-info {
  justify-content: space-between;
  align-items: flex-start;
  padding: 0px 10px;
  border-bottom: 8px solid #ccc;
  margin-bottom: 5px;
}
.tip {
  font-size: 14px;
  font-weight: 600;
}
.user {
  padding: 10px;
}
.user-img {
  width: 50px;
  height: 50px;
  background: url(https://unsplash.it/600/300?random) center center / 100% 100%;
  border-radius: 50%;
}
.user-name {
  font-size: 14px;
  font-weight: 600;
}
.user-no {
  font-size: 14px;
  color: #ccc;
}
.search {
  background: #fbd100;
  padding: 4px 20px;
  align-items: center;
}
.search-input {
  border: 1px solid #ccc;
  background: #fff;
  height: 15px;
  border-radius: 10px;
  padding: 5px;
  flex: 1;
  margin-left: 20px;
}
.tool2 {
  padding: 0px;
  text-align: center;
  margin-top: 10px;
}
.col1 {
  background: #eee;
  width: 70px;
  text-align: center;
  padding: 10px 20px;
}
.col2 {
  background: #eee;
  margin: 0 10px;
  padding: 6px 20px;
  border-radius: 0 0 10px 0;
  flex: 1;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 85% 100%, 0% 100%);
}
.col3 {
  background: yellow;
}
.bar {
  background: #eee;
  height: 6px;
  margin: 4px 0;
}
.center{
  text-align: center;
}
.yellow-line{
  background:#fbd100 ;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eee-line{
  background:#eee;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.line2{
  margin-top: 4px; 
}
.nut-searchbar{
  background: #fbd100;
  padding: 4px 8px;
}
.eee-bg{
  background: #eee;
  padding:20px 0;
}
.publish-btn{
  width: 100px;
  height: 30px;
  border-radius: 50px;
  line-height: 20PX;
  border: 1px solid #897267;
  margin: 0 30px;
}
</style>

